<template>
  <div>
 
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="50%"
   
  >
    <el-form
        :size="size"
       
        :label-width="labelWidth"
        :model="searchData"
        ref="ruleFormRef"
        :rules="rules"
       
      >
        <template v-for="item in searchForm">
          <el-form-item
            init
            v-if="item.isFormItemShow"
            :label="item.label"
            :key="item.prop"
            :prop="item.prop"
            :label-width="item.width"
          >
            <!-- input -->
            <el-input
              v-if="item.type==='Input'"
              v-model="searchData[item.prop]"
               size="small"
              :placeholder="item.placeholder"
              :disabled="item.disabled"
            ></el-input>
            <!-- select -->
            <el-select
              v-if="item.type==='Select'"
              v-model="searchData[item.prop]"
              :placeholder="item.placeholder"
              size="small"
              @change="item.change(searchData[item.prop])"
            >
              <el-option
                v-for="op in item.props"
                :label="op.label"
                :value="op.value"
                :key="op.value"
              ></el-option>
            </el-select>
            <!-- textarea-->
            <el-input
              v-if="item.type==='TextArea'"
              v-model="searchData[item.prop]"
              type="textarea"
              size="small"
              :placeholder="item.placeholder"
              :disabled="item.disabled"
            ></el-input>
            <!--tree-->
            <el-tree
              v-if="item.type==='Tree'"
              ref="tree"
              :data="item.props"
              show-checkbox
              default-expand-all
              node-key="id"
              highlight-current
              :props="defaultProps"
              :default-checked-keys="checkedDedault"
              @check-change="getCheckedKeys"
            />
          </el-form-item>
        </template>
      </el-form>
  

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel(dialogVisible)">取消</el-button>
        <el-button type="primary" @click="confirm(searchData)">确定</el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref,defineProps } from 'vue'
import { ElMessage } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
import type { FormInstance, FormRules } from 'element-plus'

const props=defineProps({
  dialogVisible:{
    type:Boolean,
    default:false
  },
  title:{
    type:String,
    default:'对话框'
  },
  content:{
    type:Array,
    default:[]
  },
  // 表单
    rules: {
      type: Object,
      default: {}
    },
    labelWidth: {
      type: String,
      default: "100px"
    },
    size: {
      type: String,
      default: "small"
    },
    searchForm: {
      type:Object,
      default:[]
    },
    searchData: {
      type: Object,
      default: {}
    },

})
// 取消
        
        const cancel = (dialogVisible) => {
          ruleFormRef.value.resetFields();
          console.log('取消',dialogVisible)
          dialogVisible=false
          emit('cancel',dialogVisible)
        }
// 确定

            const confirm = (searchData)=> {
              ruleFormRef.value.validate((valid) => {
                      if (valid) {
                        // console.log(searchData)
                        console.log('验证')
                        emit('validateTrue',searchData)
                      } else {
                          ElMessage.error('error submit !')
                          console.log('表单错误')
                          emit("validateFalse",searchData);
                      }
                    });
                 
            }
// 注册emit
      const emit = defineEmits<{
            (e: "cancel",dialogVisible): void;
            (e: "validateTrue",searchData)
            (e: "validateFalse",searchData)
           
  
}>();
// 表单验证



</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
